<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>面向对象-事件解绑</title>
    <!--<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>-->
</head>
<style>
    #china{width: 600px;height: 600px;border: 1px solid gray;padding: 20px}
    #guangdong,#shenzhen{width: 80%;height: 80%;}
    #guangdong{border:  1px solid blue;padding: 20px;}
    #shenzhen{border:  1px solid red;padding: 20px;}
</style>
<script>

window.onload = function(){






}
function $(id){
    return document.getElementById(id);
}

function cry() {
    alert("完了。破产了")
}

function la() {
    alert("哈哈，美女！")
}

function addcry(){
    $("showState").addEventListener('click',cry,false);
}

function addlf(){
    $("showState").addEventListener('click',la,false);
}

function removecry(){
    $("showState").removeEventListener('click',cry,false);
}

function removelf(){
    $("showState").removeEventListener('click',la,false);
}
</script>
<body>
    <div id="test">
        <p> <a href="" id="showState">哈哈哈</a></p>
        <p>
            <input type="button" value="让你哭" onclick="addcry()"/>
            <input type="button" value="让你笑" onclick="addlf()"/>
            <input type="button" value="你别哭" onclick="removecry()"/>
            <input type="button" value="你别笑" onclick="removelf()"/>
        </p>
    </div>
</body>
</html>

